<template>
  <div>
    <el-form-item
      v-for="item in search"
      :key="item.key"
      :prop="item.key"
      :label="isLabel ? item.label : ''"
      :rules="
        item.rules
          ? findConfig(item.rules, formConfig)
          : {
              required: findConfig(item.required, formConfig),
              message:
                item.m ||
                item.message ||
                `${rulesMessage[item.type]}${item.label}`,
            }
      "
    >
      <!-- 自定义插槽 -->
      <slot v-if="item.slotName" v-bind="item || {}" :name="item.slotName" />
      <!-- 框架 -->
      <Frames
        v-else
        v-bind="$props"
        :data="item"
        @changeValue="(data) => $emit('changeValue', data)"
      />
    </el-form-item>
    <el-form-item v-if="inline">
      <el-button type="primary" @click="$emit('query')">查询</el-button>
      <el-button @click="$emit('reset')">重置</el-button>
    </el-form-item>
  </div>
</template>


<script>
import Frames from "./utils/index.vue";
import { propsConfig, rulesMessage, findConfig } from "./utils/index.js";

export default {
  components: {
    Frames,
  },
  emits: ["changeValue", "query", "reset"],
  props: {
    inline: { type: Boolean, default: true },
    isLabel: { type: Boolean, default: true },
    search: { type: Array, default: () => [] },
    ...propsConfig,
  },
  data() {
    return {
      rulesMessage,
      findConfig,
    };
  },
};
</script>

<style lang="scss" scoped>
// .demo-form-inline {
//   .el-input,
//   .el-select,
//   .el-textarea {
//     width: 220px !important;
//   }
// }
</style>
